<template>
  <div class="hotel-search">
    <!-- 搜索表单 -->
    <div class="search-form">
      <h2>酒店查询</h2>
      <el-form :model="searchForm" ref="searchFormRef" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="目的地" prop="destination">
              <el-select
                  v-model="searchForm.destination"
                  placeholder="请选择目的地"
                  style="width: 100%"
                  @change="onDestinationChange">
                <el-option
                    v-for="city in cityOptions"
                    :key="city.value"
                    :label="city.label"
                    :value="city.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入住时间" prop="checkInDate">
              <el-date-picker
                  v-model="searchForm.checkInDate"
                  type="date"
                  :disabled-date="disabledCheckInDate"
                  placeholder="选择入住日期"
                  format="YYYY-MM-DD"
                  value-format="YYYYMMDD">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退房时间" prop="checkOutDate">
              <el-date-picker
                  v-model="searchForm.checkOutDate"
                  type="date"
                  placeholder="选择退房日期"
                  :disabled-date="disabledCheckOut"
                  format="YYYY-MM-DD"
                  value-format="YYYYMMDD">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="房间数" prop="roomQuantity">
              <el-input-number v-model="searchForm.roomQuantity" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="成人数" prop="adultCount">
              <el-input-number v-model="searchForm.adultCount" :min="1" :max="20"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="儿童数" prop="childCount">
              <el-input-number v-model="searchForm.childCount" :min="0" :max="10" @change="onChildCountChange"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键词">
              <el-input v-model="searchForm.keyword" placeholder="可选"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 儿童年龄 -->
        <el-row v-if="searchForm.childCount > 0" :gutter="20">
          <el-col :span="24">
            <el-form-item label="儿童年龄">
              <div class="child-ages">
                <el-input-number
                    v-for="(age, index) in childAges"
                    :key="index"
                    v-model="childAges[index]"
                    :min="0"
                    :max="17"
                    :placeholder="`儿童${index + 1}年龄`"
                    style="margin-right: 10px; margin-bottom: 10px;">
                </el-input-number>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 排序方式和景点选择 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="排序方式" prop="sortType">
              <el-select v-model="searchForm.sortType" placeholder="请选择排序方式" style="width: 100%">
                <el-option
                    v-for="sort in sortOptions"
                    :key="sort.value"
                    :label="sort.label"
                    :value="sort.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="附近景点">
              <el-select
                  v-model="searchForm.convenientAttractionId"
                  placeholder="选择景点(可选)"
                  style="width: 100%"
                  clearable
                  filterable
                  :loading="attractionsLoading">
                <el-option
                    v-for="attraction in currentCityAttractions"
                    :key="attraction.id"
                    :label="attraction.name"
                    :value="attraction.id">
                  <span>{{ attraction.name }}</span>
                  <span v-if="attraction.description" class="attraction-desc"> - {{ attraction.description }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="">
              <el-button @click="showCustomAttractionDialog" style="width: 100%">
                自定义景点
                <span v-if="searchForm.customAttraction" class="custom-indicator">*</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 已选择的景点展示 -->
        <el-row v-if="hasSelectedAttraction()" :gutter="20">
          <el-col :span="24">
            <el-form-item label="已选景点">
              <div class="selected-attractions">
                <!-- 便捷景点标签 -->
                <el-tag
                    v-if="searchForm.convenientAttractionId && getSelectedConvenientAttraction()"
                    type="success"
                    closable
                    @close="clearConvenientAttraction()"
                    style="margin-right: 8px; margin-bottom: 8px;">
                  {{ getSelectedConvenientAttraction().name }}
                </el-tag>
                <!-- 自定义景点标签 -->
                <el-tag
                    v-if="searchForm.customAttraction"
                    type="warning"
                    closable
                    @close="clearCustomAttraction()"
                    style="margin-right: 8px; margin-bottom: 8px;">
                  {{ searchForm.customAttraction.name }}
                </el-tag>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="() => searchHotels(1, true)" :loading="loading">查询酒店</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="success" @click="showExportDialog" :disabled="!searched || hotelList.length === 0">
                导出Excel
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 酒店列表 -->
    <div class="hotel-list" v-if="hotelList.length > 0">
      <h3>查询结果 (共{{ totalCount }}家酒店)</h3>

      <!-- 显示当前搜索条件 -->
      <div class="search-conditions" v-if="searched">
        <el-tag type="info" style="margin-right: 8px; margin-bottom: 8px;">
          排序: {{ getSortLabel(searchForm.sortType) }}
        </el-tag>
        <el-tag
            v-if="searchForm.convenientAttractionId && getSelectedConvenientAttraction()"
            type="success"
            style="margin-right: 8px; margin-bottom: 8px;">
          附近: {{ getSelectedConvenientAttraction().name }}
        </el-tag>
        <el-tag
            v-if="searchForm.customAttraction"
            type="warning"
            style="margin-right: 8px; margin-bottom: 8px;">
          附近: {{ searchForm.customAttraction.name }}
        </el-tag>
      </div>

      <div class="hotel-item" v-for="hotel in hotelList" :key="hotel.hotelInfo.nameInfo.name">
        <div class="hotel-content">
          <!-- 酒店图片 -->
          <div class="hotel-image">
            <img :src="hotel.hotelInfo.hotelImages.multiImgs[0]?.url" alt="酒店图片" />
          </div>

          <!-- 酒店信息 -->
          <div class="hotel-info">
            <h4>{{ hotel.hotelInfo.nameInfo.name }}</h4>
            <p class="hotel-name-en">{{ hotel.hotelInfo.nameInfo.enName }}</p>

            <!-- 星级 -->
            <div class="hotel-star">
              <span v-for="n in hotel.hotelInfo.hotelStar.star" :key="n" class="star">★</span>
              <span class="star-text">{{ hotel.hotelInfo.hotelStar.star }}星酒店</span>
            </div>

            <!-- 位置 -->
            <div class="hotel-location">
              <i class="el-icon-location"></i>
              {{ hotel.hotelInfo.positionInfo.positionDesc }}
            </div>

            <!-- 评分 -->
            <div class="hotel-rating" v-if="hotel.hotelInfo.commentInfo">
              <span class="score">{{ hotel.hotelInfo.commentInfo.commentScore }}</span>
              <span class="score-text">分</span>
              <span class="review-count">({{ hotel.hotelInfo.commentInfo.commenterNumber }})</span>
            </div>
          </div>

          <!-- 房间和价格信息 -->
          <div class="room-price" v-if="hotel.roomInfo && hotel.roomInfo.length > 0">
            <div class="room-info">
              <h5>{{ hotel.roomInfo[0].summary.saleRoomName }}</h5>
              <p class="bed-info">{{ hotel.roomInfo[0].bedInfo.contentList[0] }}</p>
            </div>
            <div class="price-info">
              <span class="price">{{ hotel.roomInfo[0].priceInfo.displayPrice }}</span>
              <span class="price-desc">{{ hotel.roomInfo[0].priceInfo.priceExplanation }}</span>
              <div class="delete-price" v-if="hotel.roomInfo[0].priceInfo.deletePrice">
                原价：{{ hotel.roomInfo[0].priceInfo.deleteDisplayPrice }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
            @current-change="onPageChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalCount"
            layout="prev, pager, next, total">
        </el-pagination>
      </div>
    </div>

    <!-- 无结果提示 -->
    <div v-else-if="searched && !loading" class="no-result">
      <el-empty description="暂无酒店数据"></el-empty>
    </div>

    <!-- 自定义景点对话框 -->
    <el-dialog v-model="customAttractionDialogVisible" title="自定义景点" width="500px">
      <el-form :model="customAttractionForm" label-width="80px" :rules="customAttractionRules" ref="customAttractionFormRef">
        <el-form-item label="景点名称" prop="name">
          <el-input v-model="customAttractionForm.name" placeholder="请输入景点名称" />
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="customAttractionForm.latitude" placeholder="请输入纬度" type="number" step="0.0000001" />
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="customAttractionForm.longitude" placeholder="请输入经度" type="number" step="0.0000001" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelCustomAttraction">取消</el-button>
          <el-button type="primary" @click="confirmCustomAttraction">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 导出对话框 -->
    <el-dialog v-model="exportDialogVisible" title="导出Excel" width="400px">
      <el-form :model="exportForm" label-width="100px">
        <el-form-item label="导出范围">
          <el-radio-group v-model="exportForm.type">
            <el-radio label="current">当前页</el-radio>
            <el-radio label="range">指定页数</el-radio>
            <el-radio label="all">全部</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="exportForm.type === 'range'" label="起始页">
          <el-input-number v-model="exportForm.startPage" :min="1" :max="Math.ceil(totalCount / pageSize)"></el-input-number>
        </el-form-item>

        <el-form-item v-if="exportForm.type === 'range'" label="结束页">
          <el-input-number v-model="exportForm.endPage" :min="exportForm.startPage" :max="Math.ceil(totalCount / pageSize)"></el-input-number>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exportDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="exportExcel" :loading="exportLoading">
            确定导出
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, watch } from 'vue'
import hotelApi from '@/api/hotel.js'
import { ElMessage } from 'element-plus'

export default {
  name: 'HotelSearch',
  setup() {
    const searchFormRef = ref()
    const customAttractionFormRef = ref()
    const loading = ref(false)
    const searched = ref(false)
    const hotelList = ref([])
    const totalCount = ref(0)
    const currentPage = ref(1)
    const pageSize = ref(10)
    const childAges = ref([])
    const exportDialogVisible = ref(false)
    const exportLoading = ref(false)
    const exportForm = reactive({
      type: 'current',
      startPage: 1,
      endPage: 1
    })

    // 景点相关状态
    const customAttractionDialogVisible = ref(false)
    const currentCityAttractions = ref([])
    const attractionsLoading = ref(false)
    const customAttractionForm = reactive({
      name: '',
      latitude: '',
      longitude: ''
    })

    const disabledCheckInDate = (time) => {
      return time.getTime() < Date.now() - 8.64e7
    }

    const disabledCheckOutDate = (time) => {
      return time.getTime() < Date.now() - 8.64e7
    }

    // 自定义景点表单验证规则
    const customAttractionRules = {
      name: [
        { required: true, message: '请输入景点名称', trigger: 'blur' },
        { min: 1, max: 100, message: '景点名称长度应在1到100个字符之间', trigger: 'blur' }
      ],
      latitude: [
        { required: true, message: '请输入纬度', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            const num = parseFloat(value)
            if (isNaN(num) || num < -90 || num > 90) {
              callback(new Error('纬度应在-90到90之间'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ],
      longitude: [
        { required: true, message: '请输入经度', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            const num = parseFloat(value)
            if (isNaN(num) || num < -180 || num > 180) {
              callback(new Error('经度应在-180到180之间'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ]
    }

    // 城市选项数据（改为动态加载）
    const cityOptions = ref([])

    // 排序选项
    const sortOptions = ref([
      { label: '智能排序', value: '9' },
      { label: '距离优先', value: '5' },
      { label: '好评优先', value: '6' },
      { label: '高星优先', value: '14' }
    ])

    const searchForm = reactive({
      destination: '',  // 改为空，等加载城市后设置默认值
      cityId: null,
      countryId: null,
      checkInDate: '',
      checkOutDate: '',
      roomQuantity: 1,
      adultCount: 1,
      childCount: 1,
      keyword: '',
      sortType: '9',
      convenientAttractionId: null, // 便捷景点ID（单选）
      customAttraction: null // 自定义景点（单个对象）
    })

    // 监听目的地变化，加载对应城市的景点
    const onDestinationChange = (newDestination) => {
      const selectedCity = cityOptions.value.find(city => city.value === newDestination)
      if (selectedCity) {
        searchForm.cityId = selectedCity.cityId
        searchForm.countryId = selectedCity.countryId

        // 清空当前景点选择
        searchForm.convenientAttractionId = null
        searchForm.customAttraction = null

        // 加载新城市的景点
        loadCityAttractions(selectedCity.id)
      }
    }

    // 传统的watch保持作为备份
    watch(() => searchForm.destination, onDestinationChange)

    // 监听儿童数量变化
    const onChildCountChange = (value) => {
      if (value > 0) {
        childAges.value = new Array(value).fill(0).map((_, index) => index + 3)
      } else {
        childAges.value = []
      }
    }

    // 获取排序方式标签
    const getSortLabel = (sortType) => {
      const option = sortOptions.value.find(opt => opt.value === sortType)
      return option ? option.label : '智能排序'
    }

    // 检查是否有选择的景点
    const hasSelectedAttraction = () => {
      return searchForm.convenientAttractionId || searchForm.customAttraction
    }

    // 获取选中的便捷景点信息
    const getSelectedConvenientAttraction = () => {
      if (!searchForm.convenientAttractionId) return null
      return currentCityAttractions.value.find(attraction =>
          attraction.id === searchForm.convenientAttractionId
      )
    }

    // 清空便捷景点选择
    const clearConvenientAttraction = () => {
      searchForm.convenientAttractionId = null
    }

    // 清空自定义景点选择
    const clearCustomAttraction = () => {
      searchForm.customAttraction = null
    }

    // 显示自定义景点对话框
    const showCustomAttractionDialog = () => {
      // 如果已有自定义景点，填充表单
      if (searchForm.customAttraction) {
        customAttractionForm.name = searchForm.customAttraction.name
        customAttractionForm.latitude = searchForm.customAttraction.latitude.toString()
        customAttractionForm.longitude = searchForm.customAttraction.longitude.toString()
      } else {
        // 清空表单
        customAttractionForm.name = ''
        customAttractionForm.latitude = ''
        customAttractionForm.longitude = ''
      }
      customAttractionDialogVisible.value = true
    }

    // 确认自定义景点
    const confirmCustomAttraction = async () => {
      try {
        await customAttractionFormRef.value.validate()

        // 如果选择了自定义景点，清空便捷景点选择
        if (searchForm.convenientAttractionId) {
          searchForm.convenientAttractionId = null
        }

        // 设置自定义景点
        searchForm.customAttraction = {
          name: customAttractionForm.name.trim(),
          latitude: parseFloat(customAttractionForm.latitude),
          longitude: parseFloat(customAttractionForm.longitude)
        }

        customAttractionDialogVisible.value = false
        ElMessage.success('自定义景点设置成功')
      } catch (error) {
        console.log('表单验证失败:', error)
      }
    }

    // 取消自定义景点
    const cancelCustomAttraction = () => {
      customAttractionDialogVisible.value = false
    }

    // 加载城市列表
    const loadCities = async () => {
      try {
        const response = await hotelApi.getAllCities()
        if (response.code === 200 && response.data) {
          cityOptions.value = response.data.map(city => ({
            label: city.name,
            value: city.code,
            cityId: city.cityId,
            id: city.id,
            countryId: city.countryId,
            englishName: city.englishName
          }))

          // 设置默认选中第一个城市
          if (cityOptions.value.length > 0) {
            const defaultCity = cityOptions.value[0]
            searchForm.destination = defaultCity.value
            searchForm.cityId = defaultCity.cityId
            searchForm.countryId = defaultCity.countryId

            // 加载默认城市的景点
            await loadCityAttractions(defaultCity.id)
          }
        } else {
          ElMessage.warning('获取城市列表失败')
        }
      } catch (error) {
        console.error('获取城市列表失败:', error)
        ElMessage.error('获取城市列表失败，请刷新重试')
      }
    }

    // 加载城市景点
    const loadCityAttractions = async (cityId) => {
      if (!cityId) {
        currentCityAttractions.value = []
        return
      }

      attractionsLoading.value = true
      try {
        const response = await hotelApi.getAttractionsByCityId(cityId)
        if (response.code === 200) {
          currentCityAttractions.value = response.data || []
        } else {
          currentCityAttractions.value = []
          console.warn('获取城市景点失败:', response.message)
        }
      } catch (error) {
        console.error('获取城市景点失败:', error)
        currentCityAttractions.value = []
      } finally {
        attractionsLoading.value = false
      }
    }

    // 搜索酒店
    const searchHotels = async (page = 1, resetPage = false) => {
      loading.value = true

      if (resetPage) {
        currentPage.value = 1
        page = 1
      }

      try {
        const params = {
          ...searchForm,
          childAges: childAges.value,
          pageIndex: page,
          pageSize: pageSize.value
        }

        const response = await hotelApi.searchHotels(params)

        console.log('搜索结果:', response)

        if (response) {
          hotelList.value = response.data.hotelList || []
          totalCount.value = response.data.hotelListAddtionInfo?.hotelTotalCount || 0
          currentPage.value = page
        } else {
          hotelList.value = []
          totalCount.value = 0
        }

        searched.value = true
      } catch (error) {
        console.error('搜索失败:', error)
        ElMessage.error('搜索失败，请稍后重试')
        hotelList.value = []
        totalCount.value = 0
      } finally {
        loading.value = false
      }
    }

    // 分页切换
    const onPageChange = (page) => {
      currentPage.value = page
      searchHotels(page, false)
    }

    // 重置表单
    const resetForm = () => {
      searchFormRef.value?.resetFields()
      childAges.value = []
      hotelList.value = []
      searched.value = false
      currentPage.value = 1
      searchForm.sortType = '9'
      searchForm.convenientAttractionId = null
      searchForm.customAttraction = null
    }

    // 显示导出对话框
    const showExportDialog = () => {
      exportForm.type = 'current'
      exportForm.startPage = 1
      exportForm.endPage = Math.ceil(totalCount.value / pageSize.value)
      exportDialogVisible.value = true
    }

    // 导出Excel
    const exportExcel = async () => {
      exportLoading.value = true
      try {
        let exportParams = {
          ...searchForm,
          childAges: childAges.value,
          exportType: exportForm.type,
          pageSize: pageSize.value
        }

        if (exportForm.type === 'current') {
          exportParams.startPage = currentPage.value
          exportParams.endPage = currentPage.value
        } else if (exportForm.type === 'range') {
          exportParams.startPage = exportForm.startPage
          exportParams.endPage = exportForm.endPage
        } else if (exportForm.type === 'all') {
          exportParams.startPage = 1
          exportParams.endPage = Math.ceil(totalCount.value / pageSize.value)
        }

        const response = await hotelApi.exportExcel(exportParams)

        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', `酒店数据_${exportParams.destination}_${exportParams.checkInDate}_${exportParams.checkOutDate}_${new Date().getTime()}.xlsx`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)

        ElMessage.success('导出成功')
        exportDialogVisible.value = false
      } catch (error) {
        console.error('导出失败:', error)
        ElMessage.error('导出失败，请稍后重试')
      } finally {
        exportLoading.value = false
      }
    }

    // 初始化
    onMounted(() => {
      onChildCountChange(searchForm.childCount)
      // 先加载城市列表，然后在loadCities中会自动加载默认城市的景点
      loadCities()
    })

    return {
      searchFormRef,
      customAttractionFormRef,
      searchForm,
      cityOptions,
      sortOptions,
      childAges,
      loading,
      searched,
      hotelList,
      totalCount,
      currentPage,
      pageSize,
      exportDialogVisible,
      exportLoading,
      exportForm,
      customAttractionDialogVisible,
      currentCityAttractions,
      attractionsLoading,
      customAttractionForm,
      customAttractionRules,
      loadCities,
      onDestinationChange,
      onChildCountChange,
      getSortLabel,
      hasSelectedAttraction,
      getSelectedConvenientAttraction,
      clearConvenientAttraction,
      clearCustomAttraction,
      showCustomAttractionDialog,
      confirmCustomAttraction,
      cancelCustomAttraction,
      searchHotels,
      onPageChange,
      resetForm,
      showExportDialog,
      disabledCheckInDate,
      disabledCheckOutDate,
      exportExcel
    }
  }
}
</script>

<style scoped>
.hotel-search {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #705BB9;
  min-height: 100vh;
}

.search-form {
  background: #FFFFFF;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.child-ages {
  display: flex;
  flex-wrap: wrap;
}

.custom-indicator {
  color: #e6a23c;
  font-weight: bold;
}

.attraction-desc {
  color: #999;
  font-size: 12px;
}

.selected-attractions {
  min-height: 32px;
  padding: 8px 0;
}

.hotel-list {
  margin-top: 20px;
  background: #FFFFFF;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hotel-list h3 {
  color: #333;
  margin-top: 0;
}

.search-conditions {
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.hotel-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
}

.hotel-content {
  display: flex;
  gap: 20px;
}

.hotel-image {
  flex-shrink: 0;
  width: 200px;
  height: 150px;
}

.hotel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.hotel-info {
  flex: 1;
}

.hotel-info h4 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 18px;
}

.hotel-name-en {
  color: #666;
  margin: 0 0 10px 0;
  font-size: 14px;
}

.hotel-star {
  margin-bottom: 8px;
}

.star {
  color: #ffa500;
  margin-right: 2px;
}

.star-text {
  margin-left: 5px;
  color: #666;
  font-size: 14px;
}

.hotel-location {
  color: #666;
  margin-bottom: 8px;
  font-size: 14px;
}

.hotel-rating {
  display: flex;
  align-items: center;
  gap: 5px;
}

.score {
  background: #ff6600;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: bold;
}

.score-text {
  color: #333;
}

.review-count {
  color: #666;
  font-size: 14px;
}

.room-price {
  text-align: right;
  min-width: 200px;
}

.room-info h5 {
  margin: 0 0 5px 0;
  color: #333;
}

.bed-info {
  color: #666;
  font-size: 14px;
  margin: 0 0 10px 0;
}

.price {
  color: #ff6600;
  font-size: 24px;
  font-weight: bold;
}

.price-desc {
  display: block;
  color: #666;
  font-size: 12px;
  margin-top: 5px;
}

.delete-price {
  color: #999;
  font-size: 12px;
  text-decoration: line-through;
  margin-top: 3px;
}

.pagination {
  text-align: center;
  margin-top: 30px;
}

.no-result {
  text-align: center;
  padding: 50px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>